<template>
  <div>
    <!-- 面包屑 -->
    <el-bread></el-bread>
    <!-- 添加按钮 -->
    <el-button
      type="primary"
      class="addBtn"
      size="small"
      @click="addDialog"
      plain
      >添加</el-button
    >

    <!-- 表格主体 -->
    <el-table :data="seckillList" border style="width: 100%">
      <!-- 活动名称 -->
      <el-table-column prop="title" label="活动名称" width="180">
      </el-table-column>

      <!-- 状态 -->
      <el-table-column prop="status" label="状态" width="180">
        <template v-slot="{ row }">
          <el-button v-if="row.status == 1" disabled type="success" size="small" plain
            >启用</el-button
          >
          <el-button v-else type="warning" disabled size="small" plain>禁用</el-button>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            circle
            icon="el-icon-edit"
            @click="edit(row.id)"
          ></el-button>
          <el-button
            type="danger"
            circle
            icon="el-icon-delete"
            @click="del(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- Dialog弹窗 -->
    <v-dialog ref="diaLog"></v-dialog>
  </div>
</template>


<script>
//引入辅助性函数
import { mapState, mapActions } from "vuex";
//引入Dialog弹窗
import vDialog from "./dialog.vue";
//引入删除接口
import { delSeck } from "../../request/api";
export default {
  //计算属性  使用辅助性函数  mapState
  computed: {
    ...mapState("seckill", ["seckillList"]),
  },

  //方法 使用辅助性函数 mapAction
  methods: {
    ...mapActions("seckill", ["getSECKILLList"]),

    //点击添加按钮
    addDialog() {
      //打开弹窗
      this.$store.commit("seckill/changeDialog", true);
    },

    //编辑事件
    edit(id) {
      //打开弹窗
      this.addDialog();
      //回显数据 传递id
      this.$refs.diaLog.dataForm(id);
    },

    //删除事件
    del(id) {
      this.$del(() => {
        delSeck({ id }).then((res) => {
          if (res.code == 200) {
            //成功提示
            this.$message.success(res.msg);
            //重新获取数据
            this.getSECKILLList();
          } else {
            //失败提示
            this.$message.error(res.msg);
          }
        });
      });
    },
  },

  //挂载完成
  mounted() {
    this.getSECKILLList();
  },

  //注册组件
  components: {
    vDialog,
  },
};
</script>



<style lang='less' scoped>
//添加按钮的样式
.addBtn {
  margin: 15px 5px;
}
</style>